<template>
  <el-dialog :title="pageTitle" :visible.sync="dialogFormVisible">
    <el-form :model="form">
      <el-row type="flex" class="row-bg">
        <el-col :span="4">
          <el-form-item label="供应商代码" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="供应商名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="转为潜在原因" :label-width="formLabelWidth">
        <el-select v-model="form.region" placeholder="请选择活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="转化说明" :label-width="formLabelWidth" >
        <el-input v-model="form.name" autocomplete="off" type="textarea" maxlength="200" :show-word-limit="true"></el-input>
        <p>注：说明长度在200个字以内；</p>
      </el-form-item>
      <el-form-item label="上传附件" :label-width="formLabelWidth">
        <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          multiple
          :limit="3"
          :on-exceed="handleExceed"
          :file-list="fileList">
          <el-button size="small" type="primary">选择上传文件</el-button>
          <div slot="tip" class="el-upload__tip">支持上传doc/xls/pdf格式文件，文件不能超过50M</div>
        </el-upload>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dialogFormVisible = false">提交审核</el-button>
      <el-button @click="dialogFormVisible = false">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapMutations } from 'vuex';
import { queryViewFreightListService } from '@/api/supplier/management/freight';

export default {
  data () {
    return {
      pageTitle: '转化供应商',
    }
  },
  created () {
  },
  methods: {
    ...mapMutations('supplier/baseList', [
      'setFormItemData',
    ]),
    handleBack () {
      this.$router.go(-1)
    }
  },
  beforeRouteEnter (to, from, next) {
    // 保存入口地址
    next((vm) => {
      vm.fromPageName = from.name
    })
  },
  beforeRouteLeave (to, from, next) {
    // 如果不是正常返回清空列表页面查询表单字段
    if (this.fromPageName !== to.name) {
      this.setFormItemData(null);
    }
    next()
  }
}
</script>

<style scoped>
</style>
